<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
			overflow: hidden;
			user-select: none;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif;
			font-size: 10pt;
			background-color: #F3F3F3;
		}

		#main {
			box-sizing: border-box;
			padding: 10px;
		}

		h1 {
			margin: 0;
			padding: 10px 0;
			font-size: 16px;
			background-color: #555;
			color: #f0f0f0;
			text-align: center;
		}

		#form {
			margin-top: 10px;
		}

		#username,
		#password {
			padding: 6px 10px;
			font-size: 12px;
			box-sizing: border-box;
			width: 100%;
		}

		#buttons {
			text-align: center;
		}

		p {
			margin: 6px 0;
		}

		input {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif !important;
		}
	</style>
</head>

<body>
	<h1 id="title"></h1>
	<section id="main">
		<p id="message"></p>
		<form id="form">
			<p><input type="text" id="username" placeholder="Username" required/></p>
			<p><input type="password" id="password" placeholder="Password" required/></p>
			<p id="buttons">
				<input id="ok" type="submit" value="OK" />
				<input id="cancel" type="button" value="Cancel" />
			</p>
		</form>
	</section>
</body>

<script>

	function promptForCredentials(data) {
		return new Promise((c, e) => {
			const $title = document.getElementById('title');
			const $username = document.getElementById('username');
			const $password = document.getElementById('password');
			const $form = document.getElementById('form');
			const $cancel = document.getElementById('cancel');
			const $message = document.getElementById('message');

			function submit() {
				c({ username: $username.value, password: $password.value });
				return false;
			};

			function cancel() {
				c({ username: '', password: '' });
				return false;
			};

			$form.addEventListener('submit', submit);
			$cancel.addEventListener('click', cancel);

			document.body.addEventListener('keydown', function (e) {
				switch (e.keyCode) {
					case 27: e.preventDefault(); e.stopPropagation(); return cancel();
					case 13: e.preventDefault(); e.stopPropagation(); return submit();
				}
			});

			$title.textContent = data.title;
			$message.textContent = data.message;
			$username.focus();
		});
	}

</script>

</html>
